<template>
    <div class="detail_module_panel personal_info">
        <h3 id="personal_info" class="detail_panel_title detail_panel_title_icon personal_info_icon">
            {{$t('common.personalInfo')}}
        </h3>
        <div class="panel_info_content">
            <el-row class="row">
                <el-col class="label" :span="4">{{$t('common.name')}}</el-col><!--姓名-->
                <el-col class="info" :span="20">{{ userData.realName }}</el-col>
            </el-row>
            <el-row class="row">
                <el-col class="label" :span="4">{{$t('common.gender')}}</el-col><!--性别-->
                <el-col class="info" :span="20">{{ userData.sex | switchSex }}
                </el-col>
            </el-row>
            <el-row class="row">
                <el-col class="label" :span="4">{{$t('common.dateOfBirth')}}</el-col><!--出生日期-->
                <el-col class="info" :span="20">{{ userData.birthDay | formatDate('yyyy-MM-dd') }}
                </el-col>
            </el-row>
            <el-row class="row">
                <el-col class="label" :span="4">{{$t('common.mobileNumber')}}</el-col><!--手机号码-->
                <el-col class="info" :span="20"><button @click="call(userData.userPhone)" class="btn-call" :disabled="!orderId || isCalling">{{ userData.userPhone }}</button><!--<span>（{{ $t('common.addressBookMatch') }}：{{ userData.phoneList || $t('common.none') }}）</span>--></el-col>
            </el-row>
            <el-row class="row">
                <el-col class="label" :span="4">{{$t('common.address')}}</el-col><!--地址-->
                <el-col class="info" :span="20">{{ address }}</el-col>
            </el-row>
            <el-row class="row">
                <el-col class="label" :span="4">{{$t('common.education')}}</el-col><!--学历-->
                <el-col class="info" :span="20">{{ userData.education | switchEducation }}</el-col>
            </el-row>
            <el-row class="row">
                <el-col class="label" :span="4">{{$t('common.religion')}}</el-col><!--宗教-->
                <el-col class="info" :span="20">{{ userData.religion | switchReligion }}</el-col>
            </el-row>
            <el-row class="row">
                <el-col class="label" :span="4">{{$t('common.isMarried')}}</el-col><!--婚姻状况-->
                <el-col class="info" :span="20">{{ userData.civilStatus | switchCivilStatus }}</el-col>
            </el-row>

            <el-row class="row">
                <el-col class="label" :span="4">{{$t('common.numberOfChildren')}}</el-col><!--子女个数-->
                <el-col class="info" :span="20">{{ userData.childrenNumber | switchChild }}</el-col>
            </el-row>

            <el-row class="row">
                <el-col class="label" :span="4">{{$t('common.email')}}</el-col><!--邮箱-->
                <el-col class="info" :span="20">{{ userData.email }}</el-col>
            </el-row>
            <el-row class="row">
                <el-col class="label" :span="4">{{$t('common.idCardType')}}</el-col><!--证件类型-->
                <el-col class="info" :span="20">{{ userData.identificationType }}</el-col>
            </el-row>
            <el-row class="row">
                <el-col class="label" :span="4">{{$t('common.idCardNumber')}}</el-col><!--证件号码-->
                <el-col class="info" :span="20">{{ userData.cardId }}</el-col>
            </el-row>
            <el-row class="row">
                <el-col class="label" :span="4">{{$t('common.backupPhone')}}</el-col><!--备用号码-->
                <el-col class="info" :span="20"><button @click="call(userData.phone)" class="btn-call" :disabled="!orderId || isCalling">{{ userData.phone }}</button></el-col>
            </el-row>
            <el-row class="row">
                <el-col class="label" :span="4">{{$t('common.socialAccount')}}</el-col><!--社交账号-->
                <el-col class="info" :span="20">{{ userData.socialAccountType }} - <button @click="call(userData.socialAccount)" class="btn-call" :disabled="!orderId || isCalling">{{ userData.socialAccount }}</button></el-col>
            </el-row>
            <el-row class="row">
                <el-col class="label" :span="4">{{$t('common.faceValidResult')}}</el-col><!--活体检测结果-->
                <el-col class="info" :span="20">{{userData.faceValid | switchFaceValid}}</el-col>
            </el-row>
            <el-row class="row">
                <el-col class="label" :span="4">{{$t('common.idInfoCollect')}}</el-col>
                <el-col class="info" :span="20">
                    <ul class="imgs">
                        <li>
                            <!--身份证正面-->
                            <a @click="showImg(userData.cardPositiveImg)" :style="backgroundImg(userData.cardPositiveImg)" href="javascript:void(0);"></a>
                            <span class="img_desc">{{$t('common.idCardFrontSide')}}</span>
                        </li>
                        <li>
                            <!--手持身份证照片-->
                            <a @click="showImg(userData.cardImg)" :style="backgroundImg(userData.cardImg)" href="javascript:void(0);"></a>
                            <span class="img_desc">{{$t('common.handCardPic')}}</span>
                        </li>
                        <li>
                            <!--活体照片-->
                            <a @click="showImg(userData.faceValidImg)" :style="backgroundImg(userData.faceValidImg)" href="javascript:void(0);"></a>
                            <span class="img_desc">{{$t('common.faceValidImg')}}</span>
                        </li>
                        <li>
                            <!--Front of ID-->
                            <a @click="showImg(userData.frontOfIdImg)" :style="backgroundImg(userData.frontOfIdImg)" href="javascript:void(0);"></a>
                            <span class="img_desc">{{ $t('common.idCardFrontSideAdd') }}</span>
                        </li>
                    </ul>
                </el-col>
            </el-row>
        </div>
        <show-image-video :visible.sync="showImgDialog" :img-src="imgUrl">图片展示</show-image-video>
    </div>
</template>

<script>
    import ShowImageVideo from '@/components/show-image-video';
    let that = null;
    export default {
        name: 'personalInfo',
        props: {
            userData: {
                type: Object
            },
            isCalling: {
                type: Boolean
            }
        },
        components: {
            ShowImageVideo
        },
        data() {
            return {
                aduitLoan: {
                    inputId: '',
                    ocrId: '',
                },
                ruleForm: {
                    checkIdCardNumber: '',
                },
                checkIdCardNumberList: [{id: 123, status: 0}, {id: 456, status: 1}],
                rules: {
                    checkIdCardNumber: [
                        {required: true, message: this.$t('verify.plsInput'), trigger: 'blur'}
                    ],
                },
                showImgDialog: false,
                imgUrl: '',
                orderId: '',
            };
        },
        computed: {
            address() {
                let address = '';
                const baseInfo = this.userData;
                if (baseInfo.address) {
                    address = baseInfo.district + ' ' + baseInfo.province + ' ' + baseInfo.townCity + ' ' + baseInfo.address;
                }
                return address;
            },
        },
        methods: {
            backgroundImg(url) {
                // 构造图片展示
                const style = {};
                if (url) {
                    style.backgroundImage = 'url("' + url + '")';
                }
                return style;
            },
            showImg(url, video) {
                if (video && url) {
                    this.videoUrl = url;
                    // this.videoUrl = 'http://www.w3school.com.cn/i/movie.ogg';
                    this.imgUrl = '';
                    this.showImgDialog = true;
                } else if (!video && url) {
                    this.showImgDialog = true;
                    this.imgUrl = url;
                    this.videoUrl = '';
                }
            },
            call(number) {
                this.$emit('call',number);
            }
        },
        filters: {
            switchSex(type) {
                switch (type) {
                    case 'Male':
                        return that.$t('common.male');// 男
                    case 'Female':
                        return that.$t('common.female');// 女
                    default:
                        return type;
                }
            },
            switchEducation(type) {
                switch (type) {
                    case 'Untutored':
                        return that.$t('common.eductaion.Untutored');// 未受教育
                    case 'Primary':
                        return that.$t('common.eductaion.Primary');// 小学
                    case 'Secondary':
                        return that.$t('common.eductaion.Secondary');// 中学
                    case 'Senior High School':
                        return that.$t('common.eductaion.SeniorHighSchool');// 高中
                    case "Vocational College":
                        return that.$t('common.eductaion.VocationalCollege');// 高职专科
                    case "University/College - Bachelor":
                        return that.$t('common.eductaion.Bachelor');// 大学/学院-本科
                    case 'University/College - Master':
                        return that.$t('common.eductaion.Master');// 大学/学院-硕士
                    case 'University - Doctor':
                        return that.$t('common.eductaion.Doctor');// 大学—博士
                    default:
                        return type;
                }
            },
            switchChild(type) {
                switch (type) {
                    case 3:
                        return that.$t('common.moreThanThree');// 3个及以上
                    default:
                        return type;
                }
            },
            switchCivilStatus(type) {
                switch (type) {
                    case 'UNMARRIED':
                        return that.$t('common.maritalStatus.UNMARRIED');// 未婚
                    case 'MARRIED ALREADY':
                        return that.$t('common.maritalStatus.MARRIEDALREADY');// 已婚已育
                    case 'MARRIED AND CHILDLESS':
                        return that.$t('common.maritalStatus.MARRIEDANDCHILDLESS');// 已婚未育
                    case 'WIDOW':
                        return that.$t('common.maritalStatus.WIDOW');// 丧偶（丧父）
                    case 'WIDOWER':
                        return that.$t('common.maritalStatus.WIDOWER');// 丧偶（丧妻）
                    case 'LEGAL SEPERATION':
                        return that.$t('common.maritalStatus.LEGALSEPERATION');// 离婚（不可再婚）
                    case 'GRANTED ANNULMENT':
                        return that.$t('common.maritalStatus.GRANTEDANNULMENT');// 离婚（可再婚）
                    default:
                        return type;
                }
            },
            switchReligion(type) {
                switch (type) {
                    case 'Christian':
                        return that.$t('common.religionData.Christian');// 基督教
                    case 'Catholic':
                        return that.$t('common.religionData.Catholic');// 天主教
                    case 'Islam/Muslim':
                        return that.$t('common.religionData.IslamMuslim');// 穆斯林
                    case 'Iglesia ni Cristo':
                        return that.$t('common.religionData.Iglesia');// 基督堂教会
                    case 'Buddhism':
                        return that.$t('common.religionData.Buddhism');// 佛教
                    case 'Others':
                        return that.$t('common.religionData.Others');// 其他
                    default:
                        return type;
                }
            },
            switchFaceValid(result) {
                switch (result + '') {
                    case '0':
                        return that.$t('common.pendingVerification');// 待验证
                    case '1':
                        return that.$t('common.success');// 成功
                    case '2':
                        return that.$t('common.fail');// 失败
                    default:
                        return result;
                }
            },
        },
        created() {
            that = this;
            if (this.$route.params.id) {
                this.userId = this.$route.params.id;
                this.orderId = this.$route.params.orderId;
            }
        }
    };
</script>

<style lang="scss" scoped>
</style>
